//State：存储应用的状态。
const state = {
  value: 0,
  value2: 20,
  value3:''
};

//Mutations：同步更改状态的方法。
//mutations 方法可以接受两个参数：state 和 payload
// state：表示 Vuex store 的当前状态对象，用于修改状态。
// payload：传递额外的数据给 mutations 方法，可以是任意类型的数据，但通常是一个对象，包含多个参数。
const mutations = {
  test(state,payload){
    state.value3 = payload.str
  }
  //调用方式：
  //this.$store.commit('test', { str: 5 });
  //this.$store.commit({
  //   type: 'test',
  //   str: 10
  // });
};

//Actions：处理异步操作，提交 mutations 更改状态。
//Action 的参数 actions 方法的第一个参数是一个对象，通常称为 context。这个对象包含了以下属性：
// commit：用于提交 mutations。
// state：当前模块的状态（如果是模块化 store）。
// rootState：根状态（在整个应用中共享的状态）。
// dispatch：用于触发其他 actions。
// getters：当前模块的 getters。
// rootGetters：根 getters。
const actions = {
  commitTest({ commit }) {
    commit('test',{ str: 5 }); // 提交名为 'test' 的 mutation
    commit('project01/add',{}, {root: true}); // 调用其他模块的 mutation
  },

  logState({ state }) {
    console.log(state.value); // 访问当前模块的状态
  },
  logRootState({ rootState }) {
    console.log(rootState.project01.value2); // 访问根状态中的其他模块状态
  },

  performMultipleActions({ dispatch }) {
    //dispatch方法 触发一个 action，用于处理异步操作或复杂的业务逻辑。
    dispatch('project01/increment', {}, {root: true}) // 调用其他模块的 actions
    dispatch('logState');//调用当前模块的 actions
  },

  logGetter({ getters }) {
    console.log(getters.count); // 访问当前模块的 getter
  },
  logRootGetter({ rootGetters }) {
    console.log(rootGetters['project01/count']); // 访问根 getters 中的其他模块 getter
  }
};

// Getters：从状态中派生出新的状态。
const getters = {
  count: state => state.value + 1
};

//注册为一个模块
export default {
   // 模块化 Store：将 store 拆分成多个模块，避免命名冲突，提高代码的可维护性
    namespaced: true,//启用模块的命名空间。启用命名空间后，模块中的状态、getters、mutations 和 actions 都会被自动加上模块名前缀，从而避免不同模块之间的命名冲突。
    state,
    mutations,
    actions,
    getters
};
